<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>雇主首页</title>
    <script src="https://cdn.tailwindcss.com/3.3.3"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css">
    <style>
        body {
            font-family: 'Noto Sans SC', sans-serif;
            background-color: #f5f7fa;
            max-width: 750px;
            margin: 0 auto;
        }

        .banner-container {
            height: 180px;
            overflow: hidden;
            border-radius: 12px;
        }

        .banner-slide {
            width: 100%;
            height: 100%;
            background-size: cover;
            background-position: center;
        }

        .nav-icon {
            width: 48px;
            height: 48px;
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 8px;
        }

        .stat-card {
            border-radius: 12px;
            padding: 16px;
        }

        .tab-item {
            padding: 12px 0;
            text-align: center;
        }

        .tab-item.active {
            color: #4f46e5;
            position: relative;
        }

        .tab-item.active::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 24px;
            height: 3px;
            background-color: #4f46e5;
            border-radius: 2px;
        }
    </style>
</head>

<body class="pb-16">
    <!-- 顶部Banner区 -->
    <div class="px-4 pt-4">
        <div class="banner-container relative">
            <div class="banner-slide" style="background-image: url('./banner.png')"></div>
            <div class="absolute bottom-2 left-0 right-0 flex justify-center space-x-2">
                <div class="w-2 h-2 rounded-full bg-white opacity-50"></div>
                <div class="w-2 h-2 rounded-full bg-white opacity-50"></div>
                <div class="w-2 h-2 rounded-full bg-white"></div>
            </div>
        </div>
    </div>

    <!-- 功能导航区 -->
    <div class="px-4 mt-6">
        <div class="grid grid-cols-4 gap-4">
            <!-- <a href="employer-job-publish.html" class="text-center">
                <div class="nav-icon bg-blue-100 text-blue-600 mx-auto">
                    <i class="fas fa-bullhorn text-xl"></i>
                </div>
                <div class="text-sm font-medium">发布招聘</div>
            </a> -->
            <!-- <a href="employer-job-management.html" class="text-center">
                <div class="nav-icon bg-purple-100 text-purple-600 mx-auto">
                    <i class="fas fa-tasks text-xl"></i>
                </div>
                <div class="text-sm font-medium">招聘管理</div>
            </a> -->
            <!-- <a href="aunt-info.html?filter=stars" class="text-center relative group" onclick="showStarFilter(event)">
                <div class="nav-icon bg-green-100 text-green-600 mx-auto">
                    <i class="fas fa-users text-xl"></i>
                </div>
                <div class="text-sm font-medium">人才库</div>
                <div class="absolute -top-1 -right-1 bg-red-500 text-white text-xs rounded-full w-5 h-5 flex items-center justify-center group-hover:animate-pulse">
                    <i class="fas fa-star"></i>
                </div>
            </a> -->
            <div class="text-center">
                <div class="nav-icon bg-orange-100 text-orange-600 mx-auto">
                    <i class="fas fa-chart-line text-xl"></i>
                </div>
                <div class="text-sm font-medium">数据统计</div>
            </div>
            <div class="text-center">
                <div class="nav-icon bg-indigo-100 text-indigo-600 mx-auto">
                    <i class="fas fa-file-invoice text-xl"></i>
                </div>
                <div class="text-sm font-medium">合同管理</div>
            </div>
            <div class="text-center">
                <div class="nav-icon bg-pink-100 text-pink-600 mx-auto">
                    <i class="fas fa-comments text-xl"></i>
                </div>
                <div class="text-sm font-medium">消息中心</div>
            </div>
            <!-- <div class="text-center">
                <div class="nav-icon bg-yellow-100 text-yellow-600 mx-auto">
                    <i class="fas fa-cog text-xl"></i>
                </div>
                <div class="text-sm font-medium">企业设置</div>
            </div> -->
            <div class="text-center">
                <div class="nav-icon bg-red-100 text-red-600 mx-auto">
                    <i class="fas fa-question-circle text-xl"></i>
                </div>
                <div class="text-sm font-medium">帮助中心</div>
            </div>
        </div>
    </div>

    <!-- 积分和充值区 -->
    <div class="px-4 mt-6">
        <div class="bg-white rounded-xl shadow-sm p-4">
            <div class="flex justify-between items-center mb-3">
                <h3 class="font-medium text-gray-700">我的积分</h3>
                <div class="text-xl font-bold text-yellow-600">100</div>
            </div>
            <div class="text-sm text-gray-500 mb-4">注册赠送100积分</div>
            
            <h3 class="font-medium text-gray-700 mb-2">充值优惠</h3>
            <div class="grid grid-cols-2 gap-2 mb-3">
                <div class="bg-blue-50 p-2 rounded-lg">
                    <div class="text-blue-600 font-medium">充100得120</div>
                    <div class="text-xs text-gray-500">+20积分</div>
                </div>
                <div class="bg-purple-50 p-2 rounded-lg">
                    <div class="text-purple-600 font-medium">充300得360</div>
                    <div class="text-xs text-gray-500">+60积分</div>
                </div>
            </div>
            <button class="w-full bg-yellow-500 text-white py-2 rounded-lg">
                立即充值
            </button>
        </div>
    </div>

    <!-- 数据概览区 -->
    <!-- <div class="px-4 mt-6">
        <div class="bg-white rounded-xl shadow-sm p-4">
            <h3 class="font-medium text-gray-700 mb-3">数据概览</h3>
            <div class="grid grid-cols-3 gap-3">
                <div class="stat-card bg-green-50">
                    <div class="text-2xl font-bold text-green-600">24</div>
                    <div class="text-xs text-gray-500">本月服务数量</div>
                </div>
            </div>
        </div>
    </div> -->

    <!-- 分销奖励区 -->
    <div class="px-4 mt-6 mb-20">
        <div class="bg-white rounded-xl shadow-sm p-4">
            <h3 class="font-medium text-gray-700 mb-3">推荐奖励</h3>
            <div class="space-y-3">
                <div class="flex items-start">
                    <div class="bg-green-100 text-green-600 p-2 rounded-lg mr-3">
                        <i class="fas fa-user-plus"></i>
                    </div>
                    <div>
                        <div class="font-medium">推荐雇主</div>
                        <div class="text-sm text-gray-500">成功推荐新雇主注册，可获得100积分+50元红包</div>
                    </div>
                </div>
                <div class="flex items-start">
                    <div class="bg-blue-100 text-blue-600 p-2 rounded-lg mr-3">
                        <i class="fas fa-shopping-cart"></i>
                    </div>
                    <div>
                        <div class="font-medium">订单奖励</div>
                        <div class="text-sm text-gray-500">完成订单并获好评，奖励订单金额10%积分+10%红包</div>
                    </div>
                </div>
            </div>
            <button class="w-full mt-4 bg-gradient-to-r from-blue-500 to-purple-600 text-white py-2 rounded-lg">
                立即分享
            </button>
        </div>
    </div>

    <!-- 快捷操作区 -->
    <!-- <div class="px-4 mt-6">
        <div class="bg-white rounded-xl shadow-sm p-4">
            <h3 class="font-medium text-gray-700 mb-3">快捷操作</h3>
            <div class="flex space-x-3">
                <button
                    class="flex-1 border border-gray-300 text-gray-700 py-2 rounded-lg flex items-center justify-center">
                    <i class="fas fa-headset mr-2"></i>
                    <span>联系客服</span>
                </button>
            </div>
        </div>
    </div> -->

    <!-- 星级筛选提示 -->
    <div id="starFilter" class="hidden fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center">
        <div class="bg-white rounded-xl p-6 w-4/5">
            <h3 class="font-bold text-lg mb-4">星级筛选</h3>
            <div class="space-y-3">
                <div class="flex items-center">
                    <input type="radio" name="starFilter" id="allStars" class="mr-2" checked>
                    <label for="allStars">全部护工</label>
                </div>
                <div class="flex items-center">
                    <input type="radio" name="starFilter" id="fiveStars" class="mr-2">
                    <label for="fiveStars">五星护工</label>
                </div>
                <div class="flex items-center">
                    <input type="radio" name="starFilter" id="fourStars" class="mr-2">
                    <label for="fourStars">四星及以上</label>
                </div>
            </div>
            <div class="flex space-x-3 mt-6">
                <button onclick="hideStarFilter()" class="flex-1 border border-gray-300 py-2 rounded-lg">取消</button>
                <button onclick="applyStarFilter()" class="flex-1 bg-blue-500 text-white py-2 rounded-lg">确定</button>
            </div>
        </div>
    </div>

    <!-- 底部Tab导航 -->
    <div class="fixed bottom-0 left-0 right-0 bg-white border-t border-gray-200 shadow-lg" style="max-width: 750px; margin: 0 auto;">
        <div class="flex justify-around py-2">
            <a href="employer-homepage.html" class="flex flex-col items-center px-2 py-2 text-indigo-600 relative">
                <i class="fas fa-home text-xl"></i>
                <span class="text-xs mt-1">首页</span>
                <div class="absolute bottom-0 left-1/2 transform -translate-x-1/2 w-6 h-0.5 bg-indigo-600 rounded-full"></div>
            </a>
            <a href="employer-aunt-management.html" class="flex flex-col items-center px-2 py-2 text-gray-500 hover:text-gray-700 transition-colors duration-200">
                <i class="fas fa-user-friends text-xl"></i>
                <span class="text-xs mt-1">阿姨</span>
            </a>
            <!-- <a href="employer-job-management.html" class="flex flex-col items-center px-2 py-2 text-gray-500 hover:text-gray-700 transition-colors duration-200">
                <i class="fas fa-briefcase text-xl"></i>
                <span class="text-xs mt-1">招聘</span>
            </a> -->
            <a href="employer-my-page.html" class="flex flex-col items-center px-2 py-2 text-gray-500 hover:text-gray-700 transition-colors duration-200">
                <i class="fas fa-user text-xl"></i>
                <span class="text-xs mt-1">我的</span>
            </a>
        </div>
    </div>

    <!-- <footer class="text-center text-xs text-gray-400 mt-8 pt-4 border-t border-gray-200 mx-4">
        <p>created by <a href="https://space.coze.cn" class="text-blue-500">coze space</a></p>
        <p class="mt-1">页面内容均由 AI 生成，仅供参考</p>
    </footer> -->
    <script>
        function showStarFilter(e) {
            e.preventDefault();
            document.getElementById('starFilter').classList.remove('hidden');
        }

        function hideStarFilter() {
            document.getElementById('starFilter').classList.add('hidden');
        }

        function applyStarFilter() {
            const selected = document.querySelector('input[name="starFilter"]:checked').id;
            let url = 'aunt-info.html';
            
            if (selected === 'fiveStars') {
                url += '?min_stars=5';
            } else if (selected === 'fourStars') {
                url += '?min_stars=4';
            }
            
            window.location.href = url;
        }
    </script>
</body>

</html>